<template>
  <div class="camera-btn" :class="{ muted: isMuted }" :style="btnStyle" @click.stop.prevent="muteVideo"></div>
</template>

<script>
import { handleVideoConferencing } from './index.js';
import env from '../../env.js';
import camera_on from './img/camera-on.png';
import camera_off from './img/camera-off.png';

const cameraIcon = {
  on: camera_on,
  off: camera_off,
};

export default {
  name: 'camera-btn',
  props: {
    account: String,
    muted: { type: Boolean, default: false },
    click: { type: Function, default: undefined },
  },
  data() {
    return {
      isMuted: undefined,
      baseUrl: env.BASE_URL,
    };
  },
  watch: {
    muted: {
      immediate: true,
      handler() {
        this.isMuted = this.muted;
      },
    },
  },
  computed: {
    btnStyle() {
      const icon = this.isMuted ? cameraIcon.off : cameraIcon.on;
      return {
        background: `url(${icon}) center center no-repeat`,
        cursor: 'pointer',
      };
    },
  },
  methods: {
    muteVideo() {
      this.isMuted = !this.isMuted;
      if (typeof this.click === 'function') {
        this.click({ account: this.account, ...this.$attrs, muted: this.isMuted });
      } else {
        handleVideoConferencing(this.account, {
          type: 'video',
          handle: this.isMuted ? 'close' : 'open',
        });
      }
    },
  },
};
</script>
